<template>
    <starPage :config="pageConfig" v-debug="{me,vms,models,dataSet}">
      <starTabs :config="tabConfig" @clickTab="changePlanTabs">
          <starPage slot="0" :config="{
            title:'',
            icon:'',
            cols:[12,12],
            contentStyle:{padding:'0px'},
            left:{
              title:'主计划清单',
            },
            right:{
              title:'生产订单',
            }
          }">
            <leftTable slot="leftCard" :data="dataSet.leftTableData" class="h-100"></leftTable>
            <starTabs slot="rightCard" :config="{
              name:'record',
              style:{height:'100%'},
              tabs:[
                {label:'生产订单'},
                {label:'生产计划'},
                {label:'需求订单'},
              ]
            }" @clickTab="changeTabs">
              <template #0>
                <orderTopTable style="height:50%" :data="dataSet.orderNotBindTableData"></orderTopTable>
                <orderBotTable style="height:50%" :data="dataSet.orderBindTableData" ></orderBotTable>
              </template>
              <template #1>
                  <planTopTable style="height:50%" :data="dataSet.planTopTableData"></planTopTable>
                  <planBotTable style="height:50%" :data="dataSet.planBotTableData"></planBotTable>
              </template>
              <needOrderTable slot="2" :data="dataSet.needOrderTableData"></needOrderTable>
            </starTabs>
          </starPage>


          <starPage slot="1" :config="{
            title:'',
            icon:'',
            cols:[12,12],
            contentStyle:{padding:'0px'},
            left:{
              title:'主计划清单',
            },
            right:{
              title:'生产订单',
            }
          }">
            <leftTable slot="leftCard" :data="dataSet.leftTableData" class="h-100"></leftTable>
            <!-- <Tabs slot="rightCard"
              name="record"
              v-model="tabName"
              type="card"
              @on-click="changeTabs"
            >
              <TabPane
                tab="record"
                label="生产订单"
                name="生产订单"
                context-menu
              >
                <div style="height: 30vh; overflow: auto">
                  <orderTopTable2
                    class="h-100"
                    :data="dataSet.orderNotBindTableData"
                  ></orderTopTable2>
                </div>
                <div style="height: 40vh; overflow: auto">
                  <orderBotTable2
                    class="h-100"
                    :data="dataSet.orderBindTableData"
                  ></orderBotTable2>
                </div>
              </TabPane>
              <TabPane
                tab="record"
                label="生产计划"
                name="生产计划"
                context-menu
              >
                <div style="height: 40vh; overflow: auto">
                  <planTopTable :data="dataSet.planTopTableData"></planTopTable>
                </div>
                <div style="height: 40vh; overflow: auto">
                  <planBotTable :data="dataSet.planBotTableData"></planBotTable>
                </div>
              </TabPane>
              <TabPane
                tab="record"
                label="需求订单"
                name="需求订单"
                context-menu
              >
                <needOrderTable
                  :data="dataSet.needOrderTableData"
                ></needOrderTable>
              </TabPane>
            </Tabs> -->
            <starTabs slot="rightCard" :config="{
              name:'record',
              style:{height:'100%'},
              tabs:[
                {label:'生产订单'},
                {label:'生产计划'},
                {label:'需求订单'},
              ]
            }" @clickTab="changeTabs">
              <template #0>
                <orderTopTable2 style="height:50%" :data="dataSet.orderNotBindTableData"></orderTopTable2>
                <orderBotTable2 style="height:50%" :data="dataSet.orderBindTableData" ></orderBotTable2>
              </template>
              <template #1>
                  <planTopTable style="height:50%" :data="dataSet.planTopTableData"></planTopTable>
                  <planBotTable style="height:50%" :data="dataSet.planBotTableData"></planBotTable>
              </template>
              <needOrderTable slot="2" :data="dataSet.needOrderTableData"></needOrderTable>
            </starTabs>
          </starPage>
        
        <starPage slot="2" :config="{
            title:'',
            icon:'',
            cols:[12,12],
            contentStyle:{padding:'0px'},
            left:{
              title:'主计划清单',
            },
            right:{
              title:'生产订单',
            }
          }">
            <leftTable slot="leftCard" :data="dataSet.leftTableData" class="h-100"></leftTable>
            <starTabs slot="rightCard" :config="{
              name:'record',
              style:{height:'100%'},
              tabs:[
                {label:'生产订单'},
                {label:'生产计划'},
                {label:'需求订单'},
              ]
            }" @clickTab="changeTabs">
              <template #0>
                <orderTopTable3 style="height:50%" :data="dataSet.orderNotBindTableData"></orderTopTable3>
                <orderBotTable3 style="height:50%" :data="dataSet.orderBindTableData" ></orderBotTable3>
              </template>
              <template #1>
                  <planTopTable style="height:50%" :data="dataSet.planTopTableData"></planTopTable>
                  <planBotTable style="height:50%" :data="dataSet.planBotTableData"></planBotTable>
              </template>
              <needOrderTable slot="2" :data="dataSet.needOrderTableData"></needOrderTable>
            </starTabs>
        </starPage>
        <starPage slot="3" :config="{
            title:'',
            icon:'',
            cols:[12,12],
            contentStyle:{padding:'0px'},
            left:{
              title:'主计划清单',
            },
            right:{
              title:'生产订单',
            }
          }">
            <leftTable slot="leftCard" :data="dataSet.leftTableData" class="h-100"></leftTable>
            <starTabs slot="rightCard" :config="{
              name:'record',
              style:{height:'100%'},
              tabs:[
                {label:'生产订单'},
                {label:'生产计划'},
              ]
            }" @clickTab="changeTabs">
              <template #0>
                <orderTopTable5 style="height:50%" :data="dataSet.orderNotBindTableData"></orderTopTable5>
                <orderBotTable5 style="height:50%" :data="dataSet.orderBindTableData" ></orderBotTable5>
              </template>
              <template #1>
                  <planTopTable style="height:50%" :data="dataSet.planTopTableData"></planTopTable>
                  <planBotTable style="height:50%" :data="dataSet.planBotTableData"></planBotTable>
              </template>
              <needOrderTable slot="2" :data="dataSet.needOrderTableData"></needOrderTable>
            </starTabs>
        </starPage>
        <starPage slot="4" :config="{
            title:'',
            icon:'',
            cols:[12,12],
            contentStyle:{padding:'0px'},
            left:{
              title:'主计划清单',
            },
            right:{
              title:'生产订单',
            }
          }">
            <leftTable slot="leftCard" :data="dataSet.leftTableData" class="h-100"></leftTable>
            <starTabs slot="rightCard" :config="{
              name:'record',
              style:{height:'100%'},
              tabs:[
                {label:'生产订单'},
                {label:'生产计划'},
              ]
            }" @clickTab="changeTabs">
              <template #0>
                <orderTopTable4 style="height:50%" :data="dataSet.orderNotBindTableData"></orderTopTable4>
                <orderBotTable4 style="height:50%" :data="dataSet.orderBindTableData" ></orderBotTable4>
              </template>
              <template #1>
                  <planTopTable style="height:50%" :data="dataSet.planTopTableData"></planTopTable>
                  <planBotTable style="height:50%" :data="dataSet.planBotTableData"></planBotTable>
              </template>
              <!-- <needOrderTable slot="2" :data="dataSet.needOrderTableData"></needOrderTable> -->
            </starTabs>
        </starPage>
      </starTabs>
        <template #others>
          <createModal :data="dataSet.leftFormData" :attrs="attrs"></createModal>
            <editModal :data="dataSet.leftFormData" :attrs="attrs"></editModal>
            <detailModal
              :data="dataSet.leftFormData"
            ></detailModal>
            <createPlanModal :data="dataSet.planFormData"></createPlanModal>
            <editPlanModal :data="dataSet.planFormData"></editPlanModal>
            <detailPlanModal :data="dataSet.planFormData"></detailPlanModal>
            <approvalModal :dataSet="dataSet"></approvalModal>
            <needModal :dataSet="dataSet"></needModal>
            <needDetailModal :dataSet="dataSet"></needDetailModal>
            <workCenterModal :dataSet="dataSet"></workCenterModal>
        </template>
    </starPage>
</template>

<script>

import ancMixin from "./ancMixin";

export default {
  name: "",
  mixins: [ancMixin],
  data() {
    return {
      tabName: "生产订单",
      planName: "碳化钨合批",
    };
  },
  props: {},
  watch: {},
  computed: {
    pageConfig(){
      return {
        title:'主计划'
      }
    },
    tabConfig(){
      return {
        name:'type',//tabs的名称，tabs嵌套使用时，必须唯一
        style:{height:'100%'},//tabs样式
        tabs:[
          {
              icon:'',//图标
              label:'碳化钨合批',//标签
          },
          {
              icon:'',//图标
              label:'钨粉合批',//标签
          },
          {
              icon:'',//图标
              label:'碳化钨库存',//标签
          },
          {
              icon:'',//图标
              label:'配碳库存',//标签
          },
          {
              icon:'',//图标
              label:'钨粉库存',//标签
          },
        ]
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    
  },
};
</script>
<style scoped>
.content {
  height: calc(100vh - 210px);
}
::v-deep .ivu-card-body {
  height: calc(100% - 67px);
}
</style>
